<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>

<script setup>
import * as echarts from 'echarts'

const props = defineProps({
  data: { type: Object, default: () => ({}) },
  width: { type: String, default: '740px' },
  height: { type: String, default: '400px' },
})

const chart = ref()
const chartRef = ref()
nextTick((data) => {
  chart.value = echarts.init(chartRef?.value)
})
const init = (data) => {
  chart.value.setOption({
    grid: {
      // 四周留白区域设置
      top: 40,
      right: 20,
      left: 20,
      bottom: 20,
      containLabel: true
    },
    tooltip: {
      trigger: 'item', // 触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效，
        type: 'cross', // 默认为line，line直线，cross十字准星，shadow阴影
        crossStyle: {
          color: '#fff'
        }
      },
      textStyle: {
        align: 'left'
      }
    },
    xAxis: {
      type: 'category',
      data: data.x
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      }
    },
    legend: {
      x: 'center',
      y: 'bottom',
      itemWidth: 20,
      itemHeight: 12,
      textStyle: {
        fontSize: 12, // 字体大小
        color: '#333'// 字体颜色
      }
    },
    series: [
      {
        type: 'line',
        smooth: true,
        data: data.y,
        itemStyle: {
          normal: {
            color: '#1A73E8'
          }
        },
        areaStyle: {
          color: '#c5d7ef'
        }
      }
    ]
  })
}
watch(
  () => props.data,
  init
)

</script>